<template>
    <div class='home-container'>
        <SideNav :openeds="openeds" :activeTab="activeTab"></SideNav>
        <div class='right-container'>
            <Header class="header" :headerList="headerList"></Header>
            <div class="right-content white-color">
                <div class="add-title">
                    <img src="../../src/assets/img/welcome/add.png" alt="">
                    <span>新增学科</span>
                </div>
                <div class="add-form-container">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="add-form">
                        <el-form-item label="学科名称" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="备注" prop="desc">
                            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                        </el-form-item>
                        <el-form-item class="btn-group">
                            <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
                            <el-button @click="$router.push('/subjectList')">取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Header from '../../src/components/Header'
import SideNav from '../../src/components/SideNav'
import {
    addSubject,
    updateSubject
} from '@/api/subjectList'
export default {
    name: 'home',
    data() {
        return {
            headerList: ['会员', '学科', '新增学科'],
            openeds: ['4', '4-1'],
            activeTab: 'Member',
            ruleForm: {
                name: '',
                desc: ''
            },
            rules: {
                name: [{
                    required: true,
                    message: '请填写学科名称',
                    trigger: 'blur'
                }],
                desc: [{
                    required: true,
                    message: '请填写备注',
                    trigger: 'blur'
                }]
            },
            action: this.$route.query.action,
            submitApi: this.$route.query.action === 'edit' ? updateSubject : addSubject,
            submitMsg: this.$route.query.action === 'edit' ? '编辑成功' : '添加成功'
        }
    },
    created() {
        if (this.$route.query.action === 'edit') {
            this.ruleForm.name = this.$route.query.name
            this.ruleForm.desc = this.$route.query.desc
        } else {
            this.ruleForm.name = ''
            this.ruleForm.desc = ''
        }
    },
    methods: {
        async submitForm(formName) {
            let _self = this
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let data = {
                        name: _self.ruleForm.name,
                        desc: _self.ruleForm.desc
                    }
                    if (this.action === 'edit') {
                        data.id = this.$route.query.id
                    }
                    this.submitApi(data).then(res => {
                        if (res.code == 1) {
                            _self.$message({
                                message: this.submitMsg,
                                type: 'success'
                            })
                            _self.$router.push({
                                path: '/subjectList'
                            })
                        }
                    })
                } else {
                    return false
                }
            })
        },
        resetForm() {
            this.ruleForm.name = ''
            this.ruleForm.desc = ''
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath)
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath)
        }
    },
    components: {
        Header,
        SideNav
    }
}

</script>
<style lang="less" scoped>
    @import url('../../src/assets/less/Mixins.less');
    @import url('../../src/assets/less/common.less');

    html,
    body {
        height: 100%
    }

    .add-title {
        height: 70px;
        line-height: 70px;
        padding-left: 30px;

        img {
            height: 20px;
            width: 20px;
            position: relative;
            top: 4px;
            margin-right: 12px;
        }

        span {
            font-size: 20px;
            font-family: PingFang-SC-Regular;
            font-weight: 400;
        }
    }

    .add-form-container {
        width: calc(100% - 60px);
        margin: auto;
        border: 1px solid rgba(221, 223, 230, 1);

        .add-form {
            width: 500px;
            margin: auto;
            margin-top: 30px;
        }

        .el-select {
            width: 100%
        }
    }

</style>
<style lang="less">
    .left-container {
        ul {
            background-color: #22345E
        }
    }

    .btn-group {
        >div {
            text-align: center
        }
    }

    .date-line {
        text-align: center !important
    }

    textarea {
        min-height: 100px !important
    }

    // 下拉选
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background-color: #55a8fd !important;
        color: #ffffff !important;
    }

    .el-select-dropdown__list {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        font-size: 14px !important;
        font-family: PingFang-SC-Regular !important;
        font-weight: 400;
    }

    .popper__arrow {
        display: none !important;
    }

    // 日历
    .el-picker-panel__body {
        font-family: PingFang-SC-Regular !important;
    }

    @import url('../../src/assets/less/override-element-ui.less');

</style>
